<template>
  <div>
    <my-slot>dasdasda</my-slot>
    <my-slot>
      <!-- -->
      <template v-slot:icon> <my-icon></my-icon></template>

      <!-- 匿名slot默认是default -->
      <template v-slot:default><h4>default</h4></template>
      <!-- 原则上v-slot只能用在template上 -->
      <template v-slot:myBtn><h4>具名slot</h4></template>
    </my-slot>
    <!-- 简单布局 -->
    <base-layou>
      <template v-slot:baseHeader><h4>具名slot</h4></template>
      <template v-slot:baseFooter><h4>具名slot</h4></template>
      <template v-slot:baseSidebar>
        <tree-menu>
          <template v-for="item in mentData" :key="item.id">
            <menu-item v-if="!item.children">{{ item.title }}</menu-item>
            <sub-menu v-else :key="item.id">
              <template #title>
                {{ item.title }}
              </template>
              <template v-for="c in item.children" :key="c.id">
                <menu-item>{{ c.title }}</menu-item>
              </template>
            </sub-menu>
          </template>
          <template v-for="item in mentData" :key="item.id">
            <menu-item v-if="!item.children">{{ item.title }}</menu-item>
            <re-sub-menu :key="item.id" :data="item" v-else> </re-sub-menu>
          </template>
        </tree-menu>
      </template>
      <template v-slot:default>
        <!-- <my-slot>
                 props是一个slot传递数据的集合，名称可以自定义
                 <template v-slot:default="props">
                   <img :src="props.item.url" :alt="props.item.title">
                    <p>{{props.item.desc}}</p>
                 </template>
               </my-slot> -->
        <!-- 在只用一个slot的情况下，可以直接在标签上直接使用  -->
        <!-- <my-slot v-slot="props">
          <img :src="props.item.url" :alt="props.item.title" />
          <p>{{ props.item.desc }}</p>
        </my-slot> -->
        <!-- 使用解构 -->
        <my-slot v-slot="{ item }">
          <img :src="item.url" :alt="item.title" />
          <p>{{ item.desc }}</p>
        </my-slot>
      </template>
    </base-layou>
  </div>
</template>

<script>
import MySlot from "./components/MySlot";
import MyIcon from "./components/MyIcon";
import BaseLayou from "./components/BaseLayou";
import TreeMenu from "./components/TreeMenu";
import MenuItem from "./components/MenuItem";
import mentData from "../data/menu";
import SubMenu from "./components/TreeMenu/SubMenu";
import ReSubMenu from "./components/TreeMenu/Resubmenu";
export default {
  name: "App",
  components: {
    MySlot,
    MyIcon,
    BaseLayou,
    TreeMenu,
    MenuItem,
    SubMenu,
    ReSubMenu,
  },
  setup() {
    return {
      mentData,
    };
  },
  /**
   * provide 提供 inject注入
   * 
   * 组件化
   * 把项目，以视图为线索，切割成无数的碎片
   * 这些碎片组成我们想要的样子和功能
   * 这些碎片 在其他不同的碎片中进行依赖，最终组合成一个页面交互的整体
   * 这个整体就是组件树
   * 
   * 组件A -》其他任何组件进行依赖 -》复用性
   * 组件A -》数据来源是依赖组件提供的 -》可配置性
   * 原则上 组件可以无限极的被依赖 ->数据就可以无限极的被传递下去——》单向数据流
   * 导致数据将穿过所有依赖关系中的组件，造成了许多层组件并未使用的数据出现
   * 组件中对属性进行强制注册
   * 
   * 组件依赖关系要变得简单 就是 组件之间的嵌套关系不能过度深了
   * 组件设计的时候就要注意组件的扁平化
   * 
   * provide 提供 inject注入就可以解决这个问题
   * 在父组件provide 注入数据
   * 在子组件inject 获取数据
   * 这个数据绑定的时候并不是响应式的
   * 
   * 父组件并不知道谁使用了provide数据
   * 子组件也不知道谁提供了这个数据
   * 
   * 使用provide 提供 inject注入
   * 1. 在一个组件体系下，如果有深度嵌套
   * 2. 在一个组件体系下，多层级多个组件使用的时候
   */
};
</script>

<style>
</style>
